
import React, { Component }  from "react";
import Qs from 'qs'
import axios from "../../../../http";
import moment from 'moment';

import Calend, { CalendarView } from 'calend'
import 'calend/dist/styles/index.css';
import {OnNewEventClickData} from "calend";
import {OnEventClickData} from "calend";
import {OnPageChangeData} from "calend";
import {OnSelectViewData} from "calend";

import {withRouter} from "react-router";
import {PRIVATE_ROUTE} from "../../../../route.constants";
import {splitCrossDateEvent} from "./EventUtils";
import {NavBar,Modal,TextArea,Space} from "antd-mobile";
import { Form } from "antd-mobile/es/components/form/form";
class UserReportDetail extends Component {
    constructor(props) {

        super(props);

        this.state={eventList:{},modalViewVisible:false };

    }
    onNewEventClick = (data: OnNewEventClickData) => {

        console.log('OnNewEventClickData',data)

    };
    onEventClick = (data: OnEventClickData) => {
        let reportDate=this.format_state(data.startAt)
        let start=this.format_state(data.startAt)+" 9:00:00"
        let end=this.format_state(data.startAt)+" 18:00:00"
        let state
        if(data.type=='WEEK'){
            state={
              modalViewVisible:true,
              id:data.id,
              reportDate:reportDate,
              start:start,
              end:end,
              type:'WEEK',
              workContentTitle:'本周',
              nextWorkPlanTitle:'下周',
              workContent:data.workContent,
              nextWorkPlan:data.nextWorkPlan,
              memo:data.memo
            }
            this.setState(state=state)
            return ;
        }
        if(data.type='Day'){
            state={
              modalViewVisible:true,
              id:data.id,
              reportDate:reportDate,
              start:start,
              end:end,
              type:'WEEK',
              workContentTitle:'当日',
              nextWorkPlanTitle:'次日',
              workContent:data.workContent,
              nextWorkPlan:data.nextWorkPlan,
              memo:data.memo
            }
            this.setState(state=state)
            return ;
      
      
          }
        
    };
    format_state=(date)=>{
        return moment(date).format('YYYY-MM-DD');
    }
    handleViewCancel = () => {
        this.setState({modalViewVisible:false})
    };
    onPageChange = (data: OnPageChangeData) => {
        this.setState({"eventList":{}});
        axios.post('api/oa/work/report/findAllById', Qs.stringify({
          userId:this.props.location.state.id,
          start:moment(data.rangeFrom).format('YYYY-MM-DD HH:mm:ss'),
          end:moment(data.rangeTo).format('YYYY-MM-DD HH:mm:ss')
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
              let  data=response.data.data;
              for(let i=0;i<data.length;i++){
                  if(data[i]["type"]=='WEEK'){
                      data[i]["color"]='blue'
                  }
              }
    
    
              let stateEventList=this.state.eventList;
              for(let i=0;i<data.length;i++){
                let event=data[i];
                let eventDate=moment(event.start).format('DD-MM-YYYY HH:mm:ss').substring(0,10);
                if (stateEventList[eventDate]==undefined){
                  let newEventList= new Array()
                  stateEventList[eventDate]=newEventList
              }
              let newEvent={
                id:event.id,
                startAt: moment(event.start).utc().format(),
                endAt: moment(event.end).utc().format(),
                summary: event.title,
                type:event.type,
                workContent:event.workContent,
                memo:event.memo,
                nextWorkPlan:event.nextWorkPlan,
                // color:(new Date(event.start))>(new Date())?'green':'gray',
                color:event.color?event.color:((new Date(event.start))>(new Date())?'green':'gray'),
              };
              stateEventList[eventDate].push(newEvent);
            }
    
    
            this.setState({eventList:stateEventList})
                })
                .catch(function (error) {
                    this.showErrorMessage(error);
    
            });
      }
    render() {
        return (
            <>
               <NavBar onBack={()=>{this.props.history.push({ pathname: "/main/"+PRIVATE_ROUTE.APP_OA_WORK_REPORT_USER})}} > {this.props.location.state.realName+'的报告'}</NavBar>
               <Calend
                   onEventClick={this.onEventClick}
                   events={this.state.eventList}
                   initialDate={new Date().toISOString()}
                   hourHeight={60}
                   initialView={CalendarView.WEEK}
                   disabledViews={[CalendarView.DAY]}
                   onNewEventClick={this.onNewEventClick}
                   onPageChange={this.onPageChange}
                   onSelectView={this.onSelectView}

               />
               <Modal
                        visible={this.state.modalViewVisible}
                        title="查看"
                        closeOnAction
                        onClose={this.handleViewCancel}
                        actions={[
                            {
                              key: 'confirm',
                              text: '我知道了',
                            },
                          ]}
                      
                        content={
                            <Form>
                        <Form.Item
                            label='日期'
                        >
                            <label>{this.state.reportDate}</label>
                        </Form.Item>
                        <Form.Item
                            label='工作时间'
                        >
                            <label>09:00:00-18:00:00</label>
                                </Form.Item>
                        <Form.Item
                            label={this.state.workContentTitle+"工作内容"}
                        >
                            <TextArea
                                placeholder="工作内容"
                                value={this.state.workContent}
                                onChange={(value)=>{this.setState({workContent:value})}}
                                autoSize={{ minRows: 3, maxRows: 5 }}
                                showCount
                                maxLength={300}
                                readOnly
                            />
                        </Form.Item>
                        <Form.Item
                            label={this.state.nextWorkPlanTitle+'工作计划'}
                        >
                            <TextArea
                                placeholder="工作计划"
                                value={this.state.nextWorkPlan}
                                onChange={(value)=>{this.setState({nextWorkPlan:value})}}
                                autoSize={{ minRows: 3, maxRows: 5 }}
                                showCount
                                maxLength={300}
                                readOnly
                            />
                        </Form.Item>
                        <Form.Item
                            label='备注'
                        >
                            <TextArea
                                placeholder="备注"
                                value={this.state.memo}
                                onChange={(value)=>{this.setState({memo:value})}}
                                autoSize={{ minRows: 3, maxRows: 5 }}
                                showCount
                                maxLength={300}
                                readOnly
                            />
                        </Form.Item>
                        </Form>

                        }
                    >
                        
                </Modal>

           </>
        )
    }
}

export default withRouter(UserReportDetail)